<template>
    <div class="container-fluid account-container p-0 py-5" style="background-color:#FFFFFF">
        <div class="container">
            <div class="row no-gutters">
                <div class="col-2">
                    <ul class="nav flex-column account-nav">
                        <router-link :to="{ name:'my-courses' }" class="nav-item" tag="li">
                            <a class="nav-link">课程表</a>
                        </router-link>
                        <router-link :to="{ name:'personal-info' }" class="nav-item" tag="li">
                            <a class="nav-link">个人信息</a>
                        </router-link>
                    </ul>
                    <div class="row my-3">
                       <div class="col left-picture">
                       </div>
                    </div>
                    <div class="row justify-content-center">
                        <div class="col-9  p-2">
                            <a href="#" class="left-link">下载的移动端APP</a>
                            <p class="left-link-desc">随时随地，想学就学</p>
                        </div>
                    </div>
                </div>
                <div class="col ml-3 pl-2">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
  export default {
    created () {
      this.$store.dispatch('fetchUser')
    },
    mounted () {
    },
    computed: {
      user () {
        return this.$store.state.user.profile;
      },
    }
  }
</script>
<style lang="scss" scoped>
    .user {
        background: #f1f3f7;
        .set {
            list-style-type: none;
            height: 59px;
            line-height: 59px;
            justify-content: space-between;
            background: #E7E9EE;
            box-shadow: 1px 1px 5px #CCD;
            .set-color {
                width: 20%;
                background: #f1f2f6;
                margin-left: -1%;
            }
        }
        .user-home {
            display: inline-flex;
            margin-left: 16.5%;
            padding: 0;
            justify-content: space-between;
            .user-nav {
                display: inline-block;
                position: relative;
                width: 17.55%;
                top: -59px;
                li {
                    list-style-type: none;
                    height: 45px;
                    line-height: 45px;
                    border: 1px solid #d8d8d8;
                    border-top: none;
                    display: flex;
                    justify-content: center;
                    color: #929292;
                    background: #fff;
                    font-size: 14px;
                    i {
                        position: absolute;
                        /*margin-left: -55px;*/
                        left: 35px;
                        margin-top: -3px;
                    }
                    span {
                        font-family: 微软雅黑;
                        font-weight: 300;
                    }
                }
                .title {
                    border: none;
                    height: 59px;
                    color: #888;
                    font-size: 16px;
                    font-weight: 300;
                    line-height: 59px;
                    background: #f1f2f6;
                    border-right: 1.5px solid #ccc;
                }
                a:hover, a:focus {
                    text-decoration: none;
                }

            }
            .user-content {
                display: inline-block;
                box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.02);
                width: 78%;
                overflow: hidden;
                margin-bottom: 100px;
                min-height: 411px;
            }
        }
    }
</style>
